<template>
  <div class="money-balances">

    <div 
      class="card-contain" 
      :style="{background:styleObj.cardBgColor}"
    >
      <span v-if="showWelfareBtn" class="fudai"  :style="{backgroundImage:`url(${fudai})`}" @click="welfareClick">
        <span class="iconfont icon-gongsimingchengxiala"></span>
      </span>
      <div 
        v-if="styleObj.icon"
        class="icon-contain" 
        :style="{background:styleObj.iconBgcolor}"
      >
        <i :class="['iconfont',styleObj.icon]"></i>
      </div>

      <div class="flex flex-space-between content-top">
        <span>{{title}}</span>
        <span>{{$t('setting.messageChannel.residue')}}：{{remainNum}} {{unit}}</span>
      </div>

      <div class="progress">
        <el-progress :stroke-width="6" :percentage="percentage" :show-text="false"></el-progress>
      </div>  

      <div class="flex flex-space-between content-bottom">
        <span>{{$t('setting.messageChannel.used')}}：{{cardData.usage}} {{unit}}</span>
        <span>{{$t('setting.messageChannel.totalCount')}}：{{count}} {{unit}}</span>
      </div>
      
      <slot></slot>
    </div>
    
  </div>
</template>
<script>
import { getLocalesOssUrl } from '@src/util/assets'
import NP from 'number-precision';
import { t } from '@src/locales'
const fudai = getLocalesOssUrl('/setting/fudai.gif');// img-checked
export default {
  name: 'use-card',
  props:{
    
    title:{
      type:String,
      required:true
    },
    unit:{
      type:String,
      default: t('common.base.piece')
    },

    // icon,iconBgcolor,cardBgColor
    styleObj:{
      type:Object,
      default:()=>{
        return {}
      }
    },

    cardData:{
      type:Object,
      required:true
    },

    //是否领取
    showWelfareBtn:{
      type:Boolean,
      required:true
    },
  },

  computed:{
    percentage(){
      const { total } = this.cardData
      if(!this.remainNum || !total){
        return 0
      }

      const divide = NP.divide(this.remainNum, total); 
      return NP.round(divide, 2) * 100;
    },

    remainNum(){
      const { usage = 0} = this.cardData || {}
      return NP.minus( this.count, usage || 0); 
    },

    count(){
      const { total = 0 } = this.cardData || {}
      return  NP.plus(this.addNum, total || 0); 
    }
  },
  data() {
    return {
      addNum:0,
      fudai,
    };
  },


  methods: {
    addTotal(){
      this.addNum = 0

      let timer = null

      let callback = () => {
        if(this.addNum < 100){
          this.addNum+=1;
          timer = requestAnimationFrame(callback);
        }else{
          cancelAnimationFrame(timer);
        }   
      }

      timer = requestAnimationFrame(callback);
    },

    welfareClick(){
      this.$emit("openWelFare")
    }
  },
};
</script>
<style lang="scss" scoped>
.card-contain{
  padding:16px;
  width: 389px;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1200);
  border-radius: 4px;
  padding: 16px;
  margin:24px 0 0 10px;
  position: relative;
  .icon-contain{
    width: 32px;
    height: 32px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom:20px;
    .iconfont{
      color:#fff;
    }
  }
  .progress{
    margin:16px 0 8px;
  }
  .content-top{
    height: 24px;
    font-size: 16px;
    font-weight: 500;
    color: #262626;
    line-height: 24px;
  }
  .content-bottom{
    height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: #8C8C8C;
    line-height: 22px;
    margin-bottom:20px;
  }
}
.money-balances{
  .header{
    display: flex;
    align-items: center;
    .iconfont{
      display: block;
      width:32px;
      height:32px;
      border-radius: 50%;
      color:#fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    h5{
      height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #262626;
      line-height: 20px;
      margin:0 0 0 12px;
    }
  }
  .content{
    margin-top:22px;
    span{
      font-size: 14px;
      color: #8C8C8C;
      line-height: 20px;
    }
    b{
      font-size: 32px;
      color: #262626;
      line-height: 45px;
    }
  }
  .btns{
    margin-top:49px;
  }
}
.flex-space-between {
    justify-content: space-between;
  }
.mb-8 {
  margin-bottom: 8px;
}

@keyframes roundRule{
    0%, 100%{
        -webkit-transform: rotate(-45deg);
    }
    50%{
        -webkit-transform: rotate(45deg);
    }
}
.fudai{
    width: 30px;
    height: 30px;
    margin-right:12px;
    position:absolute;
    right:0px;
    top:20px;
    cursor: pointer;
    background-size: contain;
    background-repeat:no-repeat ;
    .icon-gongsimingchengxiala{
      animation: beat 1s ease-in-out infinite;
      transform-origin: center;
      position: absolute;
      top: -20px;
      right: 9px;
      font-size:12px;
      color:#FF7875;
      opacity: 1;
    }

    @keyframes beat {
      0%, 100%{
        top: -20px;
        opacity: 1;
      }
      50%{
        top: -15px;
        opacity: 0;
      }
    }
}

</style>